<template>
    <BPTable ref='tableRef' align='center' row-key='id' :columns='columns' :api='pageApi' :buttons='buttons'>
        <!-- <template #$action="{record}">
            <BTextButton type="primary" @click="openRecharge(record)">充值</BTextButton>
        </template> -->

        <template #name="{record}">
            <a-space :size="16">
                <a-image v-if="record.avatar" :width="20" :src="imageUrl + record.avatar"></a-image>
                <div>{{ record.name }}</div>
            </a-space>
        </template>

         <template #$action="{record}">
            <template v-if="record.official">
                <BTextButton type="primary" @click="update(record)">修改</BTextButton>
                <BTextButton type="error" @click="del(record)">删除</BTextButton>
            </template>
        </template>
    </BPTable>

    <BDrawer v-model:visible='visible' :title='dialogTitle' width='600px' :confirm='submit'>
        <Edit :row="currentRow" ref="formRef" />
    </BDrawer>
</template>

<script lang='ts' setup>
    import { ref } from "vue";
    import { pageApi, deleteApi } from '@/api/User'
    import { parseTime } from "@/utils";

import { message, Modal } from "ant-design-vue";
import { useI18nStore } from "@/store/i18n";

import Edit from './Edit.vue';

    // import { CLIENT_SOURCE } from "@/constant";

    // CLIENT_SOURCE

    const imageUrl = import.meta.env.B_NET_STATIC_URL

    const i18n = useI18nStore()

    const tableRef = ref()

    const visible = ref(false)
    const formRef = ref()
    const dialogTitle = ref()

    const currentRow = ref<any>()


    const buttons = ref<SearchButton[]>([])

    buttons.value.push({
        button : 'add',
        func : () => {
            currentRow.value = null
            dialogTitle.value = '新增'
            visible.value = true
        }
    })

    const columns = ref<Column[]>([
        {
            dataIndex : 'name',
            title : '名称',
            inSearch : true,
        },

        {
            dataIndex : 'phone',
            title : '手机号码',
            inSearch : true,
        },

        {
            dataIndex : 'imUserId',
            title : 'ID',
            inSearch : true,
        },

        {
            title : '注册时间',
            dataIndex : 'registerTime',
            align : 'center',
            customRender({text}) {
                return parseTime(text)
            }
        },

        {
            title : i18n.t('operation'),
            dataIndex : '$action',
            align : 'center',
            
        }
    ])


    async function submit() {
        const res = await formRef.value.submit()
        if(res.success) {
            tableRef.value.reload()
            visible.value = false
            message.success('保存成功')
        }else {
            Modal.error({
                title : res.msg
            })
        }
    }

    const dataRows = ref<any[]>([])


    function update(row) {
            dialogTitle.value = i18n.t('edit')
            currentRow.value = row
            visible.value = true
    }

    async function del(row) {
        Modal.confirm({
            title : i18n.t('confirmDel', [row.name]),
            async onOk() {
                const res = await deleteApi(row.id)
                if(res.success) {
                    message.success(i18n.t('deleteSuccess'))
                    tableRef.value.load()
                }else {
                    message.error(res.msg)
                }
            }
        })
            
    }


    

    
</script>